<template>
	<view class="temperature-box">
		<view class="temperature">
			{{paramsStore.temperature}}°
		</view>
		<view class="temperature-detail">
			<view>{{paramsStore.weather}}</view>

			<view> {{ paramsStore.futureList[0].tempMin+'°' +"-"+paramsStore.futureList[0].tempMax+'°'}}</view>
		</view>
		<view class="temperature-detail">
			<view>风力 {{paramsStore.wind}} 级</view>
			<view>风向 {{paramsStore.winddirection}}</view>
			<view>湿度{{paramsStore.humidity}}%</view>
		</view>
	</view>
</template>

<script setup>
	import {
		paramasUserStore
	} from "@/store/params.js"
	import {
		onShow
	} from "@dcloudio/uni-app"
	import {
		ref,
		getCurrentInstance
	} from "vue"
	import {
		getWeatherInfo
	} from "../api/api";
	const paramsStore = paramasUserStore()
	//引入proxy
	const {
		proxy
	} = getCurrentInstance()
	const temperature = ref("") //温度

	// const pressure = ref("947") //气压
	const weaterList = ref([]) //未来三天预报

	onShow(() => {
		// getWeather()
	})
	//获取未来3天天气（高德api）
	async function getFutureWeather() {
		let key = "52fe0b5f5eca12ecda2d9abea3634deb"; //高德key
		console.log('城市code', paramsStore.cityCode);

		const {
			infocode,
			forecasts,
		} = await getWeatherInfo({
			city: paramsStore.cityCode,
			key: key,
			extensions: "all" //气象类型base/all
		})

		if (infocode != "10000") return proxy.$msg('网络超时，请重新定位')
		console.log('天气回调', );
		weaterList.value = forecasts[0]


	}
	//获取实时天气（高德api）
	async function getWeather() {
		let key = "52fe0b5f5eca12ecda2d9abea3634deb"; //高德key
		console.log('城市code', paramsStore.cityCode);

		const {
			infocode,
			lives,
		} = await getWeatherInfo({
			city: paramsStore.cityCode,
			key: key,
			extensions: "base" //气象类型base/all
		})

		if (infocode != "10000") return proxy.$msg('网络超时，获取实时天气失败，请重新拉取定位获取实时天气')
		console.log('天气回调', );
		paramsStore.temperature = lives[0].temperature_float //温度
		paramsStore.weather = lives[0].weather
		// paramsStore.weather = '暴雨'
		paramsStore.wind = lives[0].windpower
		paramsStore.humidity = lives[0].humidity
		paramsStore.winddirection = lives[0].winddirection
		if (paramsStore.weather == "晴") {
			paramsStore.bgImg = '/static/sun.jpg'
		}
		if (paramsStore.weather.indexOf('雨') > -1) {
			paramsStore.bgImg = '/static/rain.jpg'
		}
		// getFutureWeather()  //采用和风天气api停用高德api
	}

	//暴露方法
	defineExpose({
		getWeather
	})
</script>


<style lang="scss" scoped>
	.temperature-box {
		min-height: 30vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background: rgb(55, 55, 55, 50%);
		box-sizing: border-box;
		padding: 10px;
		margin: 0px 20px;
		border-radius: 10px;
		color: #fff;

		.temperature {
			font-size: 120px;
			font-weight: 100;

		}

		.temperature-detail {
			width: 100%;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			flex-direction: row;
			margin-bottom: 10px;
		}
	}
</style>